<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>传奇宝</title>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

			});
		</script>

		<link rel="stylesheet" href="../css/commontCust.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<style type="text/css">
			#div {
				width: 0px;
				height: 0px;
				background: red;
				position: fixed;
				top: 70%;
				left: 50%;
			}
			/*移除底部或顶部三角,需要在删除此代码*/
			
			.mui-popover .mui-popover-arrow:after {
				width: 0px;
			}
		</style>
	</head>

	<body>
		<div style="height: 100%;width: 100%;" class="divColumn divCenter">
			<div style="height: 48px;width: 100%;background-color: #05508a;position: fixed;top: 0px;" class="divRow divColumnCenter">

				<div style="width: 10%;height: 100%;" class="divCenter" id="btnBack">

					<img src="../img/left_back.png" />
				</div>

				<div style="width: 80%;height: 100%;" class="divCenter">
					<span style="color: white;font-size: 18px;">传奇宝</span>
				</div>
				<div style="width: 10%;height: 100%;" class="divCenter">
				</div>

			</div>

			<div style="width: 96%;height: 100%;padding-top: 10px;margin-top: 48px;" class="divColumn divCenter">

				<div style="height: 220px;width: 100%;" class="divCenter">

					<img src="../img/home_bk.png" style="height: 100%;" />
				</div>

				<div style="width: 100%;height: 50px;margin-top: 10px;background: url(../img/balance_bk.png);background-size: 100% 100%;" class="divCenter">

					<span style="color: white;font-size: 18px;">
					账户余额：<font id="balance"></font>
					
				</span>
				</div>

				<div style="background: white;width: 100%;height: 120px;border-radius: 5px;margin-top: 10px;padding: 0px 10px;">
					<div style="width: 100%;height: 33.33%;" class="divRow divColumnCenter">
						<span style="color: black;font-size: 14px;text-align: center;line-height: 40px;">充值账号：</span>
						<input style="height: 100%;margin: 0px;border-width: 0px;font-size: 14px;" id="user_name" placeholder="请输入账号" readonly="readonly"/>
					</div>
					<div style="width: 100%;height: 1px;background-color: #F0F0F0;"></div>

					<div style="width: 100%;height: 33.33%;" class="divRow divColumnCenter">
						<span style="color: black;font-size: 14px;text-align: center;line-height: 40px;">充值金额：</span>
						<span style="color: black;font-size: 14px;text-align: center;line-height: 40px;">100元</span>
					</div>
					<div style="width: 100%;height: 1px;background-color: #F0F0F0;"></div>
					<div style="width: 100%;height: 33.33%;" class="divRow divColumnCenter">
						<span style="color: black;font-size: 14px;text-align: center;">交易密码：</span>
						<input type="password" style="width: 75%;margin: 0px;border-width: 0px;font-size: 14px;height: 90%;padding:0;" id="transact_pwd" placeholder="请输入您的交易密码" />
					</div>
					<div style="width: 100%;height: 1px;background-color: #F0F0F0;"></div>
				</div>

				<!--确认充值-->
				<div style="width: 88%;height: 54px;background: #05508a;margin-top: 30px;border-radius: 5px;" id="sureChange" class="divCenter">

					<span style="color: white;font-size: 14px;">确认充值</span>

				</div>

				<!--下载安装-->

				<div style="width: 100%;height: 80px;background-color: white;border-radius: 5px;margin-top: 30px;margin-bottom: 30px;padding: 10px;" class="leftAndRight">

					<img src="../img/phone_img.png" />

					<div style="width: 60%;padding-left: 10px;" class="divColumn">
						<span>传奇宝</span>
						<span style="color: gainsboro;font-size: 13px;margin-top: 4px;">12M</span>
					</div>

					<span id="btnCkq" style="background: #228AF4;border-radius: 5px;color: white;padding: 5px;font-size: 14px;">下载安装</span>

				</div>

			</div>

		</div>
		
		
		<!--弹出层-->
		<div id="div"></div>
		<div id="popover" class="mui-popover divColumn" style="height: 250px;">
			<div class="divRow divColumnCenter" style="height: 40px;width: 100%;">
				<div style="width: 18%;" class="divCenter" id="cance">
					<img src="../img/cance_img.png" />
				</div>
				<span style="font-size: 13px;">复制充值卡号和密码在传奇宝进行充值</span>
			</div>
			<div style="width: 100%;height: 1px;background-color: gainsboro;"></div>
			<div style="width: 100%;height: auto;" class="divCenter">
				<div style="width: 90%;height: auto;" class="divColumn">
					<div style="height: 50px;width: 100%;" class="divRow divColumnCenter">
						<span style="font-size: 16px;">充值卡号：</span>
						<span style="font-size: 16px;color: #B3B3B3;" id="pay_card"><!--1356535685535--></span>

					</div>
					<div style="width: 100%;height: 1px;background-color: gainsboro;"></div>

					<div style="height: 50px;width: 100%;" class="divRow divColumnCenter">
						<span style="font-size: 16px;">充值密码：</span>
						<span style="font-size: 16px;color: #B3B3B3;" id="pay_pwd"><!--666666--></span>

					</div>
					<div style="width: 100%;height: 1px;background-color: gainsboro;"></div>
					<div style="width: 100%;" class="divCenter">

						<span style="height: 48px;width: 70%;background-color: #F37100;color: white;margin-top: 20px;border-radius: 10px;text-align: center;line-height: 48px;font-size: 14px;" id="btnCopy">一键复制</span>

					</div>

				</div>
			</div>
		</div>
		
		<script src="../lang/pages.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/config.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/sockjs.js"></script>
		<script src="../js/jquery-1.7.2.min.js"></script>
		<script src="../resource/index/chuangqibao.js"></script>
		
	
		<script type="text/javascript">
			/*
			mui.init()
			document.getElementById("sureChange").addEventListener("tap", function() {
				//调用隐藏/显示弹出层
				mui("#popover").popover('toggle', document.getElementById("div"));
			})*/
		</script>
		<script>
			$('#cance').click(function() {
				document.getElementById('pay_card').innerHTML='';
				document.getElementById('pay_pwd').innerHTML='';
				document.getElementById('transact_pwd').value='';
				mui("#popover").popover('hide');

			});
			/*
			$('#btnCopy').click(function() {
				mui("#popover").popover('hide');

			});
			*/
			$('#btnBack').click(function(){
				mui.back();
				
			})
			
		</script>

	</body>

</html>